<script setup>
import { ref, onMounted, watch, toRefs, nextTick } from 'vue'
import { unit2 } from '../unit.js'
import link from '../link.js'
import { store } from '@/js/store.js';

const props = defineProps({
    config: Object,
});

const box = ref()
var boxTop = 0, boxHeight = 0;
const playStart = ref(false);
onMounted(() => {
    nextTick(() => {
        // 初始获取元素位置，为了节省渲染性能，没有实时获取位置属性
        // 配置端因不停的修改，动画可能会有显示时机问题为正常现象
        boxTop = box.value.getBoundingClientRect().top - store.screenTop;
        boxHeight = box.value.clientHeight;
        props.config.animation && onSrcoll(store.srcollTop)
    });
})
function onSrcoll(_top) {
    if (boxTop - _top >= store.screenHeight*0.1-boxHeight && boxTop - _top <= store.screenHeight*0.8) {
        playStart.value = true;
    } else {
        playStart.value = false;
    }
}
watch(() => store.srcollTop, (newVal, oldVal) => {
    props.config.animation && onSrcoll(newVal)
}, {
    immediate: true
})

</script>

<template>

    <div class="box p3d" ref="box" :style="{
        width: unit2(config?.width, config?.width_unit),
        height: unit2(config?.height, config?.height_unit),
        backgroundColor: config?.backgroundColor
    }">
        <div :class="['flexrow box3d',{rotateshow:playStart}]" style="width: 100%;height: 100%;">
            <div :class="['con'+(config?.row),'box3d']" v-for="(item, index) in config?.grid" :style="{visibility: item.img?'visible':'hidden'}">
                <div class="img box3d scaleshow" :style="{
                    width: item.size[0]+'00%',
                    height: item.size[1]+'00%',
                    // zIndex: item.img?1:'auto',
                    padding: unit2(config?.padding),
                    transform: `translateZ(${playStart||!config.animation?0:Math.random()*400-100}px)`,
                    opacity: playStart||!config.animation?1:0
                }">
                    <img v-if="item.img" :src="config?.list.find(e=>e.imgid==item.img).url" @click="link(config?.list.find(e=>e.imgid==item.img))" :alt="config?.name" class="objcover" :style="{
                        borderRadius: unit2(config?.borderRadius)
                    }">
                </div>
            </div>
        </div>
    </div>


</template>

<style scoped>
    .box{min-height: 93px;margin: 0 auto;}
    .con4{width: 25%;height: 25%;}
    .con5{width: 20%;height: 20%;}
    .con6{width: 16.6666%;height: 16.6666%;}
    .img{
        position: relative;
        width: 100%;height: 100%;overflow: hidden;
    }
    .img img{background-color: white;display: block;}


    .rotateshow {
        animation: rotate-show-action 1.8s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
    }
    @keyframes rotate-show-action {
    0% {
        transform: rotateX(-60deg);
    }
    100% {
        transform: rotateX(0deg);
    }
    }

    .scaleshow {
        transition: transform 2s ease-in, opacity 0.7s ease-out;
    }

</style>